@import '@/lib/reset.scss';

html, body, #root, .container {
  width: 100%;
  min-height: 600px;
}
.container {
  .header {
    @include rect(100%, 70px);
    @include margin(0 auto 25px);
    @include background-color(#000);
    .header-top{
      @include rect(1200px, 100%);
      margin:0 auto;
      @include flexbox();
      @include align-items();
      .logo {
        @include rect(132px, 46px);
        background: url('./img/logo.png') no-repeat center;
        background-size:  132px 46px;
      }
      .nav-main {
        @include rect(310px, 70px);
        .nav-container {
          @include rect(240px, 70px);
          margin-left: 70px;
          @include flexbox();
          justify-content: space-between;
          @include align-items();
          .nav-item {
            @include rect(40px, 70px);
            position: relative;
            overflow: hidden;
            a{
              @include rect(40px, 67px);
              @include flexbox();
              justify-content: center;
              align-items: center;
              font-size: 20px;
              color: #fff;
            }
            .line {
              @include rect(40px, 3px);
              background-color:#e91e63;
              position: absolute;
              left: -40px;
              bottom: 0;
            }
          }
          li:hover a{
            color: #e91e63;
          }
          li:nth-child(1) .line {
            display: none;
          }
          li:nth-child(1) a {
            color: #e91e63;
          }

          li:hover .line{
            left: 0;
            bottom: 0;
            transition: 0.3s ease;
          }
          .on{
            border-bottom: 3px solid #e91e63;
          }
        }
      }
      .search {
        @include rect(300px, 40px);
        border-radius:40px;
        background-color: #232323;
        margin-left: 50px;
        @include flexbox();
        align-items: center;
        .search_ipt{
          @include rect(238px, 30px);
          background-color: #232323;
          border: 0;
          margin-left: 23px;
          color: #fff;
          font-size: 14px;
        }
        .btn_search {
          font-size: 25px;
          @include rect(30px, 100%);
          text-align: center;
          display: block;
          color: #cccccc
        }
      }
      .nav-operation {
        @include rect(410px, 70px);
        .nav-container {
          @include rect(100%, 100%);
          @include flexbox();
          justify-content:flex-start;
          .nav-item {
            height: 100%;
            margin-left: 30px;
            .nav-item-link{
              height: 100%;
              @include flexbox();
              align-items: center;
              .iconfont {
                font-size: 20px;
                color: #cccccc;
                margin-right: 5px;
              }
              span {
                color: #cccccc;
                font-size: 14px
              }
            }
          }
        }
      }
    }
    .nav{
      @include rect(100%, 40px);
      background-color: #232323;
      .nav-top {
        @include rect(1200px, 100%);
        margin: 0 auto;
        .kind {
          @include rect(950px, 100%);
          margin-left:200px;
          @include flexbox();
          li {
            height: 100%;
            a {
              height: 100%;
              font-size: 16px;
              color: #fff;
              display: flex;
              @include justify-content(flex-start);
              @include align-items();
              padding-right:60px;
            }
          }
          li:hover a {
            color: #e91e63;
          }
          li:first-Child a {
            color: #e91e63
          }
        }
      }
    }
  }
  .banner {
    @include rect(100%, 781px)
  }
  .section {
    @include rect(100%, 586px)
  }
  .footer {
    @include rect(100%, 324px);
    li:hover{
      cursor: pointer;
      color:#e91e63; 
    }
    background-color:#222;
    .footer-content{
      @include rect(1200px, 200px);
      margin: 0 auto;
      overflow: hidden;
      .footer-content-left {
        @include rect(250px, 80px);
        margin-top: 55px;
        float: left;
        .migu_family {
          font-size: 18px;
          color: #999999;
          @include rect(250px, 18px);
          
        }
        .migu_family_kind {
          font-size: 12px;
          color: #999999;
          margin-top: 15px;
          @include rect(250px, 62px);
          li {
            min-width: 30px;
            height: 17px;
            float: left;
            margin-top: 5px;
            @include rect(auto, 30px);
            margin-left: 20px;
          }
          li:nth-Child(1) {
            margin-left: 0;
          }
          li:nth-Child(4) {
            margin-left: 0;
          }
        }
      }
      .migu_family_middle {
        @include rect(255px, 80px);
        left: 50%;
        margin: 55px 0 0 235px;
        float: left;
        .connect_we {
          @include rect(100%, 20px);
          font-size: 18px;
          color: #999999;
        }
        .content {
          @include rect(100%, 62px);
          font-size: 12px;
          color: #999999;
          margin-top: 15px;
          li {
            min-width: 30px;
            height: 17px;
            float: left;
            margin-top: 5px;
            @include rect(auto, 30px);
            margin-left: 20px;
          }
          li:nth-Child(1) {
            margin-left: 0;
          }
          li:nth-Child(4) {
            margin-left: 0;
          }
        }
      }
      .migu_family_right {
        float: right;
        margin-top: 55px;
        @include rect(190px, 140px);
        h3 {
          @include rect(100%, 20px);
          font-size: 18px;
          color: #999999;
          font-weight: normal;
        }
        .migu_Client {
          @include rect(100%, 115px);
          @include flexbox();
          justify-content: space-between;
          margin-top: 15px;
          img {
            @include rect(70px, 70px);
            margin-top: 15px;
          }
          p {
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }
    .footer-bottom {
      @include rect(1200px, 70px);
      margin: 10px auto;
      .footer-nav {
        @include rect(100%, 14px);
        @include flexbox();
        @include justify-content();
        li{
          height: 100%;
          border-right: 1px solid #999999;
          line-height: 14px;
          a {
            padding: 0 10px;
            color: #999999;
            font-size: 12px;
          }
        }
        li:hover a {
          color:#e91e63; 
        }
        li:last-Child {
          border: 0;
        }
      }
      .c-auth {
        @include rect(100%, 14px);
        margin-top: 11px;
        @include flexbox();
        @include justify-content();
        li{
          padding: 0 10px;
          font-size: 12px;
          color: #999999;
        }
      }
      .c-info {
        @include rect(100%, 14px);
        text-align: center;
        line-height: 14px;
        font-size: 12px;
        color: #999999;
        margin-top: 11px;
      }
    }
  }
}